<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		.div {
			width: 1000px;
			height: 800px;
			margin: 0 auto;
			border: 0px solid;
		}
	</style>

	<body>
		<div class="div">
			<canvas id="myCanvas" width="1000" height="800" style="border: 1px solid;">
			
		</canvas>
		</div>
		<script type="text/javascript">
			//获取画布

			var canvas = document.getElementById("myCanvas");
			//创建画笔
			var ctx = canvas.getContext("2d");
			var rot = 0;
			var l = 10;
			var t = 10;
			var lrot = 10;
			var trot = 10;

			setInterval(function() {
				var y = Math.sin(rot / 180 * Math.PI) * 50;
				var x = Math.cos(rot / 180 * Math.PI) * 50;
				ctx.beginPath();
				ctx.fillStyle = "yellow"
				ctx.clearRect(0, 0, 1200, 500);

				ctx.fillStyle = "yellow";
				ctx.fillRect(0, 0, 1000, 800);
				ctx.beginPath();
				ctx.arc(l, t, 100, (rot / 180) * Math.PI, (1 + rot / 180) * Math.PI);
				ctx.fillStyle = "white";
				ctx.fill();

				ctx.beginPath();
				ctx.arc(l, t, 100, (rot / 180) * Math.PI, (1 + rot / 180) * Math.PI, true);
				ctx.fillStyle = "black";
				ctx.fill();
				//中圆

				ctx.beginPath();
				ctx.arc(l + x, t + y, 50, 0, 2 * Math.PI);
				ctx.fillStyle = "black";
				ctx.fill();

				ctx.beginPath();
				ctx.arc(l - x, t - y, 50, 0, 2 * Math.PI);
				ctx.fillStyle = "white";
				ctx.fill();
				//小圆
				ctx.beginPath();
				ctx.arc(l + x, t + y, 10, 0, 2 * Math.PI);
				ctx.fillStyle = "white";
				ctx.fill();

				ctx.beginPath();
				ctx.arc(l - x, t - y, 10, 0, 2 * Math.PI);
				ctx.fillStyle = "black";
				ctx.fill();
				rot = rot + 10;
				l = l + lrot;
				t = t + trot;
				if(l >= 920) {
					lrot = -10;
				}
				if(l <= 100) {
					lrot = 10;
				}
				if(t >= 690) {
					trot = -10;
				}
				if(t <=100 ) {
					trot = 10;
				}
			}, 100);
		</script>
	</body>

</html>